<template>
  <div class="bg-white-box">
    <img src="static/icon-big.png" class="text-center dc-logo pb20"/>
    <div class="pl50 pr50 mt80">
      <inputItem placeholder="请输入手机号" type="tel"
                 iconName="icon-login-account"
                 v-model="username"
                 :maxLength = "11"
                 v-validate="{ rules: { required: true,phone: true } }"
                 name="手机号" :class="{'is-danger': errors.has('手机号')}"
      />
      <inputItem class="mt30" placeholder="请输入密码" type="password"
                 iconName="icon-login-password"
                 v-model="password"
                 :maxLength = "20"
                 v-validate="{ rules: { required: true } }"
                 name="密码" :class="{'is-danger': errors.has('密码')}"
      />
    </div>
    <div class="pl50 pr50 mt50">
      <mt-button size="large" type="primary" @click="_login">登录</mt-button>
      <div class="forgets mt30">
        <router-link to="register" class="link">立即注册</router-link>
        <router-link to="forgetPwd" class="link">忘记密码?</router-link>
      </div>
    </div>
    <img v-show="onchangeing" src="../../assets/wave.gif" class="wave"/>
  </div>
</template>
<script>
  import inputItem from '@/common/plugins/input/inputItem.vue';
  import _login from './_login';
  import mintUi from '@/common/mintUi';
  import {col, row} from '@/common/Flex';
  // import {Toast} from 'mint-ui';
  export default {
    data () {
      return {
        username: '15900322627',
        password: 'aa123456',
        // windowHeight: '',
        onchangeing: true
      };
    },
    methods: {
      // 用户登录
      _login () {
        let submitobj = {
          username: this.username,
          password: this.password
        };
        this.$validator.validateAll().then((result) => {
          if (result) {
            _login.login(submitobj, this);
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      }
    },
    created () {
      // Toast(document.documentElement.clientHeight);
      _login.windowHeight = document.documentElement.clientHeight;
    },
    mounted () {
      //以下是调整低端安卓手机  点击input挡住问题
      window.onresize = () => {
        // Toast(document.documentElement.clientHeight);
        if (document.documentElement.clientHeight > _login.windowHeight) {
          this.onchangeing = true;
        } else if (document.documentElement.clientHeight < _login.windowHeight) {
          this.onchangeing = false;
        }
        _login.windowHeight = document.documentElement.clientHeight;
      };
    },
    components: {
      inputItem,
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../assets/css/variable';
  .dc-logo{
    margin: 0 auto;
    padding-top: px2rem(120px);
    display: flex;
    //for ios iphone 4
    @media screen and (min-width:320px) and (max-width:330px) and (orientation:portrait) {
      width: px2rem(80px);
      padding-top: px2rem(80px);
    }
  }
  .wave{
    width: 100%;
    height: px2rem(220px);
    bottom: 0;
    left:0;
    position: absolute;
  }
  .bg-white-box {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
    // min-height: 500px;
    overflow-y: auto;
  }
  .forgets {
    margin-bottom: 50px;
    > a {
      font-size: px2rem(26px);
      color: #7b78f2;
      + a {
        color: #7e7e7f;
        float: right;
      }
    }
  }
</style>
